<template>
  <div class="zkxUi">
    <zkx-title></zkx-title>

    <zkx-loading :visible="visible"></zkx-loading>
    
    <div>
      <el-button type="primary" @click="clickLoading">显示loading组件</el-button>
    </div>

    <div>
      <el-button type="success" @click="clickNotice('表格还不能提交', $event)">显示Notice组件</el-button>
    </div>
    <div v-show="vShow" style="width:100%;height:100px"></div>
    <div>
      <el-button type="primary" @click="vShow=!vShow">测试v-show占位</el-button>
    </div>
    <!-- 阻止单击事件继续传播 -->
    <div>
      <el-button type="primary" @click.stop="stopClick">单击事件</el-button>
    </div>

    <!-- 阻止所有的点击 -->
    <div @click.prevent.self="selfPrevent">
      <el-button type="primary">阻止所有的点击</el-button>
    </div>

    <!-- 点击事件将只会触发一次 -->
    <div>
      <el-button type="primary" @click.once="onceClick">点击事件将只会触发一次</el-button>
    </div>
    <!-- 自动将用户的输入值转为数值类型 -->
    <div>
      <input v-model.number="age" type="number" @change="numberInput" />
    </div>
    <!-- 自动过滤用户输入的首尾空白字符 -->
    <div>
      <input v-model.trim="msg" @change="trimInput"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "zkxUi",
  data() {
    return {
      visible: false,
      vShow: true,
      age: "",
      msg:''
    };
  },
  methods: {
    clickNotice(message, event) {
      if (event) {
        event.preventDefault();
      }
      alert(message);
      this.zkxNotice({
        title: "提示",
        content: "Notice组件",
        duration: 2000
      });
    },
    clickLoading() {
      this.visible = true;

      setTimeout(() => {
        this.visible = false;
      }, 3000);
    },

    stopClick() {
      console.log(1111111);
    },

    selfPrevent() {
      console.log(2222);
    },
    onceClick() {
      console.log(333333);
    },

    numberInput() {
      console.log(this.age);
    },
    trimInput(){
      console.log(this.msg);
      
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  margin-bottom: 15px;
}
</style>


